<template>
    <div id="app" class="eventHeadle">
        <div class="elementCl">
            <div class="elementResout" v-bind:style="{top:ResTop,left:ResLeft}" @click="elementResout">
                复位
            </div>
            <div v-grag ref="elementSt" class="elementStart" v-bind:style="{top:mou1.Top1,left:mou1.Left1}">开始
            </div>
            <div v-grag ref="elementAr" class="elementArrows" v-bind:style="{top:mou2.Top2,left:mou2.Left2}">箭头
            </div>
            <div v-grag ref="elementUp" class="elementUp" v-bind:style="{top:mou3.Top3,left:mou3.Left3}">加载
            </div>
            <div v-grag ref="elementEn" class="elementEnd" v-bind:style="{top:mou4.Top4,left:mou4.Left4}">结束
            </div>
            <div v-grag ref="elementEr" class="elementErr" v-bind:style="{top:mou5.Top5,left:mou5.Left5}">错误
            </div>
            <div class="paletteCl">
                <!--画板-->
            </div>
        </div>
    </div>
</template>

<script>
    import { mapActions, mapState } from 'vuex'
    export default {
        name: 'eventHeadle',
        data() {
            return {
                ResTop: '5px',
                ResLeft: '25px',
                mou1: {
                    flag1: false,
                    initX1: 0,
                    initY1: 0,
                    mouseDownX1: 0,
                    mouseDownY1: 0,
                    Top1: '45px',
                    Left1: '25px',
                },
                mou2: {
                    flag2: false,
                    initX2: 0,
                    initY2: 0,
                    mouseDownX2: 0,
                    mouseDownY2: 0,
                    Top2: '150px',
                    Left2: '25px'
                },
                mou3: {
                    flag3: false,
                    initX3: 0,
                    initY3: 0,
                    mouseDownX3: 0,
                    mouseDownY3: 0,
                    Top3: '250px',
                    Left3: '25px'
                },
                mou4: {
                    flag4: false,
                    initX4: 0,
                    initY4: 0,
                    mouseDownX4: 0,
                    mouseDownY4: 0,
                    Top4: '360px',
                    Left4: '25px'
                },
                mou5: {
                    flag5: false,
                    initX5: 0,
                    initY5: 0,
                    mouseDownX5: 0,
                    mouseDownY5: 0,
                    Top5: '460px',
                    Left5: '25px'
                }
            }
        },
        computed: mapState(['tempName', 'ceshi']),
        created: function () {
            console.log('获取----', this.ceshi.name)
        },
        filters: {
            ctimeFun: function (val) {
                var now = new Date(val)
                var year = now.getYear() - 100;
                var month = now.getMonth() + 1;
                month = month > 9 ? month : "0" + month
                var date = now.getDate();
                date = date > 9 ? date : "0" + date
                var hour = now.getHours();
                hour = hour > 9 ? hour : "0" + hour
                var minute = now.getMinutes();
                minute = minute > 9 ? minute : "0" + minute
                return "20" + year + "-" + month + "-" + date + "   " + hour + ":" + minute;
            }
        },
        methods: {
            // 复位
            elementResout() {
                this.$refs.elementSt.style.left = '25px'
                this.$refs.elementSt.style.top = '45px'
                this.$refs.elementAr.style.left = '25px'
                this.$refs.elementAr.style.top = '150px'
                this.$refs.elementUp.style.left = '25px'
                this.$refs.elementUp.style.top = '250px'
                this.$refs.elementEn.style.left = '25px'
                this.$refs.elementEn.style.top = '360px'
                this.$refs.elementEr.style.left = '25px'
                this.$refs.elementEr.style.top = '460px'
            }
        }
    }

</script>

<style scoped>
    .eventHeadle {
        width: 100%;
        min-height: 600px;
        height: 100%;
        display: flex;
        overflow: hidden;
    }
    
    .elementCl {
        width: 100%;
        height: 100%;
        min-height: 600px;
        border: 1px solid #ccc;
        position: relative;
        border: 1px solid #ccc;
        color: #fff;
    }
    
    .elementResout {
        text-align: center;
        cursor: pointer;
        position: absolute;
        border: 1px solid #ccc;
        z-index: 10000;
        width: 200px;
        height: 30px;
        line-height: 30px;
        color: #000;
        border-radius: 5px;
        z-index: 1000000000000000000000;
        background-color: #fff;
        user-select: none;
    }
    
    .elementStart {
        width: 200px;
        height: 90px;
        text-align: center;
        line-height: 100px;
        cursor: pointer;
        position: absolute;
        border: 1px solid red;
        z-index: 10000;
        background-color: red;
        user-select: none;
    }
    
    .elementArrows {
        position: absolute;
        width: 200px;
        height: 90px;
        text-align: center;
        line-height: 100px;
        cursor: pointer;
        border: 1px solid red;
        background-color: rgb(0, 0, 0);
        user-select: none;
        z-index: 10000;
    }
    
    .elementUp {
        position: absolute;
        width: 200px;
        height: 90px;
        text-align: center;
        line-height: 100px;
        cursor: pointer;
        border: 1px solid red;
        user-select: none;
        background-color: #555;
        z-index: 10000;
    }
    
    .elementEnd {
        position: absolute;
        width: 200px;
        height: 90px;
        text-align: center;
        line-height: 100px;
        user-select: none;
        cursor: pointer;
        border: 1px solid red;
        z-index: 10000;
        background-color: #123456;
    }
    
    .elementErr {
        position: absolute;
        width: 200px;
        height: 90px;
        text-align: center;
        line-height: 100px;
        user-select: none;
        cursor: pointer;
        border: 1px solid red;
        z-index: 10000;
        background-color: green;
    }
    
    .paletteCl {
        position: absolute;
        top: 0px;
        left: 250px;
        width: calc(100% - 270px);
        min-height: 600px;
        height: 100%;
        border-right: 1px solid #ccc;
        border-left: 1px solid #ccc;
    }
</style>